<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
		<title>Jeu du pendu</title>
		
		<link rel="stylesheet" media="screen" type="text/css" title="Design_Sobre" href="css/sobre.css" id="css_principal"/>
		<link rel="icon" type="image/ico" href="favicon.ico" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="jeu, pendu" />
		<meta name="Description" content="Jeu de pendu interactif et convivial"/>
		<script type="text/javascript" src="js/jquery1.7.js"></script>
		<script type="text/javascript" src="js/jeu.js"></script>
		<script type="text/javascript" src="js/contact.js"></script>
		<script type="text/javascript" src="js/affichage.js"></script>
		<script type="text/javascript" src="js/checkword.js"></script>
	</head>
	<body>
	
	<!-- EN-TETE -->
	<header>
		<h1> Jeu du Pendu </h1><br/>
		Choix du Style : 
		<select id="choix_css" onchange="switchCSS('css_principal',this.options[this.selectedIndex].value);">
			<option value="sobre.css" selected="selected">Sobre</option>
			<option value="rafine.css">Rafin&eacute;</option>
			<option value="basic.css">Basic</option>
		</select>
	</header>
	
	<!-- MENU -->
	<ul class="menu" id="menu">
		<li class="menu_selected" id="tab_0" onclick="setFocus(this.id)"><h2>Jeu</h2></li>
		<li class="menu_unselected" id="tab_1" onclick="setFocus(this.id)"><h2>R&egrave;gle du jeu</h2></li>
		<li class="menu_unselected" id="tab_2" onclick="setFocus(this.id)"><h2>Nouveau mot</h2></li>
		<li class="menu_unselected" id="tab_4" onclick="setFocus(this.id)"><h2>Contact</h2></li>
		<li class="menu_unselected" id="tab_3" onclick="setFocus(this.id)"><h2>Cr&eacute;dits</h2></li>
	</ul>
	
	<!-- CONTENU -->
	<ul class="content" id="content">	
		<li class="zoneJeu" id="content_0">
			<div class="data">
				<input type="hidden" id="session_id" value=""/>
			</div>
			<button id="begin" onclick="init(this.id,0);">Commencer !</button>
			<div class="resultats">
				<span id="mot_fr"></span><br/>
				<span id="mot_en"></span>
			</div>
			<div class="pendu">
					<img class="image_pendu" id="image_pendu" src="images/imgvide.png" alt="Etat initial">
					<span id="tour"></span><br/>
			</div>
			<button class="reload" id="reload" value="reload" onclick="reload();">Nouveau !</button>

			<ul id="saisie" class="saisie">
				<li><button id="A" value="A" disabled="disabled" onclick="validation(this.id);">A</button></li>
				<li><button id="B" value="B" disabled="disabled" onclick="validation(this.id);">B</button></li>
				<li><button id="C" value="C" disabled="disabled" onclick="validation(this.id);">C</button></li>
				<li><button id="D" value="D" disabled="disabled" onclick="validation(this.id);">D</button></li>
				<li><button id="E" value="E" disabled="disabled" onclick="validation(this.id);">E</button></li>
				<li><button id="F" value="F" disabled="disabled" onclick="validation(this.id);">F</button></li>
				<li><button id="G" value="G" disabled="disabled" onclick="validation(this.id);">G</button></li>
				<li><button id="H" value="H" disabled="disabled" onclick="validation(this.id);">H</button></li>
				<li><button id="I" value="I" disabled="disabled" onclick="validation(this.id);">I</button></li>
				<li><button id="J" value="J" disabled="disabled" onclick="validation(this.id);">J</button></li>
				<li><button id="K" value="K" disabled="disabled" onclick="validation(this.id);">K</button></li>
				<li><button id="L" value="L" disabled="disabled" onclick="validation(this.id);">L</button></li>
				<li><button id="M" value="M" disabled="disabled" onclick="validation(this.id);">M</button></li>
				<li><button id="N" value="N" disabled="disabled" onclick="validation(this.id);">N</button></li>
				<li><button id="O" value="O" disabled="disabled" onclick="validation(this.id);">O</button></li>
				<li><button id="P" value="P" disabled="disabled" onclick="validation(this.id);">P</button></li>
				<li><button id="Q" value="Q" disabled="disabled" onclick="validation(this.id);">Q</button></li>
				<li><button id="R" value="R" disabled="disabled" onclick="validation(this.id);">R</button></li>
				<li><button id="S" value="S" disabled="disabled" onclick="validation(this.id);">S</button></li>
				<li><button id="T" value="T" disabled="disabled" onclick="validation(this.id);">T</button></li>
				<li><button id="U" value="U" disabled="disabled" onclick="validation(this.id);">U</button></li>
				<li><button id="V" value="V" disabled="disabled" onclick="validation(this.id);">V</button></li>
				<li><button id="W" value="W" disabled="disabled" onclick="validation(this.id);">W</button></li>
				<li><button id="X" value="X" disabled="disabled" onclick="validation(this.id);">X</button></li>
				<li><button id="Y" value="Y" disabled="disabled" onclick="validation(this.id);">Y</button></li>
				<li><button id="Z" value="Z" disabled="disabled" onclick="validation(this.id);">Z</button></li>
			</ul>
		</li>

		<li class="zoneNotice" id="content_1"><br/>
			<h3>R&egrave;gle du jeu :</h3>
			<ol>
				<li>
					<h4>But du jeu</h4>
					<p>
						Il s'agit de retrouver un mot choisi al&eacute;atoirement par l'ordinateur. Le joueur peut faire un nombre fini de propositions.
					</p>
				</li>		
				<li>
					<h4>Le d&eacute;roulement du jeu</h4>
					<p>
						On choisit un mot au hasard dans une base de donn&eacute;es. C'est ce mot qui sera le mot &agrave; trouver par le joueur. Le joueur fait une proposition. Tant que les conditions de fin de partie ne sont pas atteintes, le joueur 				peut faire une nouvelle proposition.
						Pour que toutes les conditions de fin de partie soient atteintes, le joueur doit trouver le mot en Francais et en Anglais
					</p>
				</li>	
				<li>
					<h4>Proposition de lettres </h4>
					<p>
						Le joueur peut proposer une lettre :<br/>
						La proposition est erron&eacute;e :<br/>
						Lorsque la lettre propos&eacute;e n'appartient pas au mot,
						ou bien lorsque la lettre a d&eacute;j&agrave; &eacute;t&eacute; propos&eacute;e,
						dans ce cas, un morceau suppl&eacute;mentaire du corps du pendu est dessin&eacute; sous la potence. <br/>
						Le corps du pendu est constitu&eacute;
						d'une tête
						d'un tronc
						de deux bras (droit et gauche)
						de deux jambes (droite et gauche).<br/>
						Avant la première proposition, aucun morceau du corps du pendu n'est sous la potence.
						Lorsque une lettre propos&eacute;e est correcte, on doit d&eacute;couvrir la (ou toutes les) occurence(s) de cette lettre dans le mot &agrave; trouver.
						Le joueur peut aussi proposer un nouveau mot.
					</p>
				</li>
				<li>
					<h4>Fin de partie</h4>
					<p>
						La partie se termine lorsque<br/>
						Le pendu est complètement dessin&eacute;. Le joueur a alors perdu.<br/>
						Le joueur a d&eacute;couvert le mot &agrave; trouver en Anglais et en Francais. Dans ce cas, le joueur a gagn&eacute;.<br/>
					</p>
				</li>
			</ol>
		</li>

		<li class="zoneNouveauMot" id="content_2"> 
			<br/>				
			
				<fieldset>
					<legend> Formulaire de prosition de mot</legend>
					<label>Nouveau mot en Francais : </label><input type="text" id="mot"/><br/><br/>
					<label>Nouveau mot en Anglais : </label><input type="text" id="word"/><br/><br/>
					<button onclick="checkword();">Ajouter le mot</button>
				</fieldset>
			<br/>
			<span id="resultat"></span>
		</li>
		
		<li class="zoneContact" id="content_4"> 
			<br/>				
			<!--<form>
			désactivé car pas de script pour la récéption du formulaire
			-->
				<fieldset>
					<legend> Formulaire de contact</legend>
					<br/>
					<table>
						<tr>
							<td>
								Votre adresse e-mail:
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input id="mail" type=text name="mail" size="50" onkeyup="VerifMail()"/>
							</td>
							<td class="img">
								<img id="mailTrue" src="images/valid.png" alt="ok"/>
								<img id="mailFalse" src="images/error.png" alt="ko"/>
							</td>
						</tr>
						<tr>
							<td>
								Objet du Message:
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input id="objet" type="email" name="objet" size="50" onkeyup="VerifNoVide(document.getElementById(this.name));"/>
							</td>
							<td class="img">
								<img id="objetTrue" src="images/valid.png" alt="ok"/>
								<img id="objetFalse" src="images/error.png" alt="ko"/>
							</td>
						</tr>
						<tr>
							<td>
								Votre Message:
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<textarea id="message" name="message" cols="40" rows="4" onkeyup="VerifNoVide(document.getElementById(this.name));"></textarea>
							</td>
							<td class="img">
								<img id="messageTrue" src="images/valid.png" alt="ok"/>
								<img id="messageFalse" src="images/error.png" alt="ko"/>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend> Informations compl&eacute;mantaires</legend>
					<br/><i> Attention, pour un rendu optimal, veuillez utiliser le navigateur Opera</i><br/>
					<table>
						<tr>
							<td>
								Donnez un note:
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input type="range"  min="0" max="20" step="1" oninput="document.getElementById('rangeOutput').textContent=value"/><span id="rangeOutput">10</span>
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								Indiquez votre couleur préférée :
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input type="color" name="couleur"/>
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								Indiquez la date de naissance du capitaine :
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input type="date" name="date_naiss"/>
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								D&eacute;duisez son age, otez y trois, multipliez par deux et indiquez le résultat :
							</td>
							<td></td>
						</tr>
						<tr>
							<td>
								<input type="number" name="age" min="1" max="100" />
							</td>
							<td></td>
						</tr>
					</table>
				</fieldset>
				<button onclick="Verif(this.form);">Envoyer</button>
			<!--</form>-->
			<br/>
		</li>
		
		<li class="zoneCredits" id="content_3">
			<p>Projet r&eacute;alis&eacute; dans le cadre de la <em>license Pro SIL option MESSI</em></p>
				<h3>Remerciements :</h3>
				<ul>
					<li><address><strong>Emeline Vales &eacute;pouse Juges</strong> (dite <cite>La Mur&egrave;ne</cite>) : emeline.vales@iut2.upmf-grenoble.fr</address></li>
					<li><address><strong>Cl&eacute;ment Castagnoli</strong>  : clement.castagnoli@iut2.upmf-grenoble.fr</address></li>
					<li><address><strong>Romain Blain</strong> (dit <cite>La Patate</cite>) : romain.blain@iut2.upmf-grenoble.fr</address></li>
					<li><address><strong>Corentin Carrez</strong> : corentin.carrez@iut2.upmf-grenoble.fr</address></li>
				</ul>					
		</li>
	</ul>
	
	<!-- PIED DE PAGE -->
	<footer>
		<p>
			<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a>
		</p>
		<p>
			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img style="border:0;width:88px;height:31px"
					src="http://jigsaw.w3.org/css-validator/images/vcss"
					alt="CSS Valide !" />
			</a>
		</p>
		<script type="text/javascript">setFocus("tab_0");</script>
	</footer>
  </body>
</html>
